<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
	<head>
		<meta charset="utf-8">
		<title>雨水雨量实时监测系统</title>
		<link rel="stylesheet" type="text/css" th:href="@{/layui-v2.6.8/layui/css/layui.css}"/>
<!--		<link rel="stylesheet" th:href="@{../static/layui-v2.6.8/layui/css/layui.css}"/>-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=VDbugvmy5nctL3aFsu1bLapKxmVsm3ft"></script>
		<script th:src="@{/layui-v2.6.8/layui/layui.js}"></script>
		<script th:src="@{/js/echarts.min.js}"></script>
		<style>
			body{
				/*background-color: #e2e2e2;*/
				background-image: url("/img/index.jpg");
			}
			.div_main{
				border: 2px solid black;
			}
			.div_flg1{
				width: 400px;
				height: 400px;
				background-color: #F0F0F0;
			}
			.div_flg2{
				width: 600px;
				height: 400px;
				background-color: #F0F0F0;
			}
			.div_row_table{
				background-color: #F0F0F0;
			}
		</style>
	</head>
	<body>
		<div >
			<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
			    <li class="layui-nav-item layui-this"><a href="">首页</a></li>
			    <li class="layui-nav-item"><a href="/rainwater/page/show">实时显示</a></li>
<!--			    <li class="layui-nav-item"><a href="data_user.html">数据查询</a></li>-->
			    <li class="layui-nav-item"><a href="/rainwater/page/analysis">数据分析</a></li>
			    <li class="layui-nav-item"><a href="/rainwater/page/point">测点管理</a></li>
				<li class="layui-nav-item"><a href="/rainwater/page/user">用户管理</a></li>
				<li class="layui-nav-item">
					<a th:href="@{/rainwater/page/individual}"><img src="//t.cn/RCzsdCq" class="layui-nav-img">用户</a>
				</li>
			</ul>
		</div>
		<br>
		<div class="layui-container div_main" style="background-color:#e2e2e2 ">
			<br>
			<div class="layui-row">
				<div class="div_flg1 layui-col-md5">
					<div id="fig1" style="width: 400px;height:400px;"></div>
				</div>
				<div class="div_flg2 layui-col-md6 layui-col-md-offset1">
					<div id="fig2" style="width: 600px;height:400px;"></div>
				</div>
			</div>
			<br>
			<hr class="layui-border-orange">
			<br>
			<div class="layui-row div_row_table">
				<div class="layui-col-md5">
					<br><br><br><br>
					<div class="layui-col-md10 layui-col-md-offset1">
						<div class="layui-form layui-form-pane">
							<div class="layui-form-item">
								<label  class="layui-form-label">位置</label>
								<div class="layui-input-block">
									<input id="address" type="text"  required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">气温</label>
								<div class="layui-input-block">
									<input id="tem" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">气压</label>
								<div class="layui-input-block">
									<input id="air" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">预计降水量</label>
								<div class="layui-input-block">
									<input id="water" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-col-md8 layui-col-md-offset2">
							<button class="layui-btn layui-btn-primary layui-border-green layui-btn-fluid" onclick="clickBtn()">
								查看详情
							</button>
						</div>
					</div>
				</div>
				<div class="layui-col-md7">
					<div id="map" style="width: 100%;height:500px">
					</div>
				</div>
			</div>
			<br>
		</div>
		<footer class="layui-footer">
			<p>2024年10月制。</p>
			<p>由cfy提供</p>
		</footer>
	</body>
</html>
<script>
	// 图的数据
	let myChart2 = echarts.init(document.getElementById('fig2'));
	let myChart1 = echarts.init(document.getElementById('fig1'));
	dataFig();
	let map = new BMapGL.Map("map");          // 创建地图实例
	let point = new BMapGL.Point(112.454455, 38.021669);  // 创建点坐标
	map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setHeading(64.5);   //设置地图旋转角度
	map.setTilt(73);       //设置地图的倾斜角度
	//请求后台获取点位数据
	$.ajax({
		url:'/rainwater/page/index/map',
		type:'POST',
		data:{fun:'fig'},
		dataType:'json',
		success:function (response){
			console.log(response);
			data_map(response.data)
		},
		error:function (xhr, status, error){
			console.error('Error:', status, error);
		}
	})
	function data_map(data){
		for (var i = 0; i < data.length; i++) {
			// console.log(data[i].x);
			let id = data[i].id;
			let x = data[i].x;
			let y = data[i].y;
			let point = new BMapGL.Point(x,y);
			var marker = new BMapGL.Marker(point);
			map.addOverlay(marker);
			marker.addEventListener("click", function(){
				getPointById(id);
			});
		}
	}
	let pointId = null;
	function getPointById(id){
		pointId = id;
		// alert("你点击了标记点: "+id);
		$.ajax({
			url:'/rainwater/page/index/mapData',
			type:'POST',
			data:{id:id},
			dataType:'json',
			containData:'application/json',
			success:function (response){
				console.log(response);
				$(document).ready(function() {
					$("#address").val(response.data.address);
					$("#tem").val(response.data.tem);
					$("#air").val(response.data.air);
					$("#water").val(response.data.water);
				});
			},
			error:function (xhr, status, error){
				console.error('Error:', status, error);
			}
		})
	}
	function clickBtn(){
		window.location.href = "/rainwater/page/detail/?id="+pointId;
	}
	function dataFig(){
		$.ajax({
			url:'/rainwater/page/index/figData',
			type:'POST',
			data:{fun:'fig'},
			dataType:'json',
			success:function (response){
				console.log(response);
				cirqueData(response.data.str);
				columnData(response.data.map);
			},
			error:function (xhr, status, error){
				console.error('Error:', status, error);
			}
		});
	}
	function cirqueData(data){
		let option_cirque = {
			title: {
				text: '用户情况',
				left: 'center',
				top: 'center'
			},
			series: [
				{
					type: 'pie',
					data: [
						{
							value: data[0],
							name: '管理员'
						},
						{
							value: data[1],
							name: '普通用户'
						}
					],
					radius: ['40%', '70%']
				}
			]
		};
		myChart1.setOption(option_cirque);
	}
	function columnData(data){
		let keys = [];
		let values = [];
		for(let key in data){
			if (data.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链
				keys.push(key);
				values.push(data[key]);
			}
		}
		let option_column = {
			xAxis: {
				data: keys
				// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {},
			series: [
				{
					type: 'bar',
					data: values
					// data: [23, 24, 18, 25, 27, 28, 25]
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart2.setOption(option_column);
	};
</script>